<template>
	<view class="voucherCenter">
		<view class="balance_box">
			<view class="balance_title">金豆余额</view>
			<view class="balance_goldenBean">{{ userInfoData.goldenBean }}</view>
			<image class="balance_bgImg" src="../../static/my/headerIcon.png"></image>
		</view>
		<view class="voucher_Package">
			<view class="voucher_Package_title">金豆充值</view>
			<view class="voucher_Package_box">
				<view class="voucher_Package_item"
				 v-for="(item, index) in balanceList" :key="index"
				 :class="{ 'voucher_Package_selectItem' : index == selectPackageCurrent }"
				 @tap="changePackage(index)">
					<view class="voucher_Package_con1">
						<view class="voucher_Package_con1_title1">豆</view>
						<view class="voucher_Package_con1_title2">
							{{ item.goldenBean }}
						</view>
					</view>
					<view class="voucher_Package_con2">
						<view class="voucher_Package_con2_title1">
							{{ item.amount }}元
						</view>
						<view class="voucher_Package_con2_title2">
							{{ item.discount }}
						</view>
						<view class="voucher_Package_con2_title3">元</view>
					</view>
				</view>
			</view>
		</view>
		<view class="voucher_agreement">
			<view class="voucher_agreement_radioBox" @tap="termCheckedChange">
				<radio class="voucher_agreement_radio" color="#4591E6"
				 :checked="termChecked" />
			</view>
			<view class="voucher_agreement_title voucher_agreement_title1">已阅读并同意</view>
			<view class="voucher_agreement_title voucher_agreement_title2"
			@tap="toNav('/pages/my/termInfo?type=2')">充值服务协议</view>
		</view>
		<view class="voucher_btn" @tap="voucher">立即充值</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, computed } from 'vue';
	
	import { payType } from "@/common/js/data.js";
	import { 
		getUserInfo,
		getPaymentType,
	} from "@/common/js/method.js";
	const userInfoData = computed(()=>{
		return uni.getStorageSync('userInfo');
	});
	const termChecked = ref(false);
	onLoad(()=>{
		getVoucherList();
	})
	
	// 选中套餐的index
	const selectPackageCurrent = ref(1);
	// 切换选择套餐
	function changePackage(index) {
		selectPackageCurrent.value = index;
	}
	// 是否同意协议
	function termCheckedChange() {
		termChecked.value = !termChecked.value;
	}
	
	const balanceList = ref([])
	
	// 充值
	function voucher() {
		if(termChecked.value) {
			getPaymentInfo();
		}else {
			uni.showToast({
				title: '请阅读并同意服务协议',
				icon: 'none'
			})
		}
	}
	
	// 跳转至菜单页面
	function toNav(path) {
		uni.navigateTo({
			url: path,
			fail(err) {
				console.log(err);
			}
		})
	}
	// 获取充值列表
	function getVoucherList(e) {
		uni.$request('/api/busi/package/select', { type: 1 }).then((res)=>{
			if(res.status == 200) {
				balanceList.value = res.data.packageList;
			}
		});
	}
	// 获取支付详情
	async function getPaymentInfo(e) {
		let paymentType = await getPaymentType();
		let params = {
			type: 1,
			packageId: balanceList.value[selectPackageCurrent.value].id,
			payType: payType[paymentType],
		}
		try {
			let res = await uni.$request('/api/busi/recharge/add', params);
			await uni.$pay(res.data);
			paySuccess();
		}catch(err) {
			uni.showToast({
				icon: 'fail',
				title: '充值失败',
				mask: true
			})
		}
		
	}
	// const onWxPay = (data, provider) => {
	// 	let orderInfo = {};
	// 	if(provider == 'wxpay') {
	// 		orderInfo = {
	// 			timeStamp: String(data.timeStamp),
	// 			nonceStr: data.nonceStr,
	// 			package: `prepay_id=${data.prepayId}`,
	// 			signType: 'RSA',
	// 			paySign: data.paySign,
	// 		}
	// 	}else if(provider == 'alipay') {
	// 		orderInfo = {
	// 			orderInfo: String(data.tradeNo),
	// 		}
	// 	}else if(provider == 'toutiao') {
	// 		orderInfo = {
	// 			orderInfo: {
	// 				order_id: data.orderId,
	// 				order_token: data.orderToken,
	// 			},
	// 			service: 5,
	// 		}
	// 	}else if(provider == 'kuaishou') {
	// 		orderInfo = {
	// 			serviceId: 1,
	// 			orderInfo: {
	// 				order_no: data.orderId,
	// 				order_info_token: data.orderToken,
	// 			},
	// 		}
	// 	}
	// 	//订单对象，从服务器获取
	// 	uni.requestPayment({
	// 		provider, //固定值为"wxpay"
	// 		success: function(res) {
	// 			console.log('支付成功' + JSON.stringify(res))
	// 			// var rawdata = JSON.parse(res.rawdata);
	// 			if(provider == 'alipay') {
	// 				if(res.resultCode == 9000) {
	// 					paySuccess();
	// 				}else {
	// 					uni.showToast({
	// 						icon: 'error',
	// 						title: '充值失败',
	// 						mask: true
	// 					})
	// 				}
	// 			}else if(provider == 'toutiao') {
	// 				if(res.code == 0) {
	// 					paySuccess();
	// 				}else {
	// 					uni.showToast({
	// 						icon: 'fail',
	// 						title: '充值失败',
	// 						mask: true
	// 					})
	// 				}
	// 			}else if(provider == 'wxpay') {
	// 				paySuccess();
	// 			}
	// 		},
	// 		fail: function(err) {
	// 			console.log('支付失败:' + JSON.stringify(err));
	// 			uni.showToast({
	// 				icon: 'error',
	// 				title: '充值失败',
	// 				mask: true
	// 			})
	// 		},
	// 		...orderInfo
	// 	});
	// }

	const paySuccess = ()=>{
		getUserInfo();
		uni.showToast({
			icon: 'success',
			title: '充值成功',
			mask: true
		})
		setTimeout(()=>{
			uni.navigateBack();
		}, 1500)
	}
	
</script>

<style lang="less" scoped>
.voucherCenter {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding: 40rpx 32rpx;
	box-sizing: border-box;
}
.balance_box {
	overflow: hidden;
	position: relative;
	padding: 32rpx;
	border-radius: 16rpx;
	background: linear-gradient(90deg, rgba(69, 144, 230, 1) 0%, rgba(69, 230, 218, 1) 100%);
	&::after {
		content: "";
		border-radius: 16rpx;
		opacity: .1;
		height: 100%;
		width: 100%;
		background: linear-gradient(90deg, rgba(69, 144, 230, 1) 0%, rgba(69, 230, 218, 1) 100%);
		position: absolute;
		left: 0;
		bottom: -12rpx;
	}
}
.balance_title {
	font-size: 28rpx;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 40rpx;
	color: rgba(255, 255, 255, 1);
}
.balance_goldenBean {
	font-size: 96rpx;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 112rpx;
	color: rgba(255, 255, 255, 1);
}
.balance_bgImg {
	height: 320rpx;
	width: 324rpx;
	position: absolute;
	top: -32rpx;
	right: -84rpx;
	opacity: .1;
}
.voucher_Package_title {
	margin: 40rpx 0 32rpx;
	font-size: 32rpx;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 46rpx;
	color: rgba(56, 56, 56, 1);
}
.voucher_Package_box {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 32rpx 20rpx;
}
.voucher_Package_item {
	border: 4rpx solid #ffffff;
	padding: 40rpx 0;
	border-radius: 16rpx;
	background: rgba(255, 255, 255, 1);
}
.voucher_Package_selectItem {
	border-color: #4691E6;
}
.voucher_Package_con1 {
	display: flex;
	justify-content: center;
	align-items: center;
	.voucher_Package_con1_title1 {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 40rpx;
		width: 40rpx;
		margin-right: 6rpx;
		border-radius: 50%;
		background-color: #FFC300;
		font-size: 24rpx;
		font-weight: 700;
		letter-spacing: 0;
		line-height: 34rpx;
		color: #ffffff;
		text-align: center;
		vertical-align: top;
	}
	.voucher_Package_con1_title2 {
		font-size: 48rpx;
		font-weight: 700;
		letter-spacing: 0;
		line-height: 70rpx;
		color: rgba(69, 145, 230, 1);
	}
}
.voucher_Package_con2 {
	margin-top: 20rpx;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	.voucher_Package_con2_title1 {
		font-size: 20rpx;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 28rpx;
		text-decoration-line: line-through;
		color: rgba(166, 166, 166, 1);
	}
	.voucher_Package_con2_title2 {
		margin-left: 8rpx;
		font-size: 48rpx;
		font-weight: 700;
		letter-spacing: 0;
		line-height: 48rpx;
		color: rgba(56, 56, 56, 1);
	}
	.voucher_Package_con2_title3 {
		margin-left: 4rpx;
		font-size: 20rpx;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 28rpx;
		color: rgba(56, 56, 56, 1);
	}
}
.voucher_agreement {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 70rpx 0 60rpx;
	.voucher_agreement_radioBox {
		display: inline-block;
	}
	.voucher_agreement_radio {
		transform:scale(0.8)
	}
	.voucher_agreement_title {
		font-size: 24rpx;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 34rpx;
	}
	.voucher_agreement_title1 {
		color: rgba(166, 166, 166, 1);
	}
	.voucher_agreement_title2 {
		margin-left: 10rpx;
		color: rgba(69, 145, 230, 1);
	}
}
.voucher_btn {
	border-radius: 200px;
	background: rgba(69, 145, 230, 1);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 32rpx 0;
	font-size: 32rpx;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 46rpx;
	color: rgba(255, 255, 255, 1);
}
</style>